<script setup>
import {ref, reactive} from 'vue'
import BorderBox1 from '@/components/BorderBox1.vue'
import BorderBox2 from '@/components/BorderBox2.vue'
import BorderBox3 from '@/components/BorderBox3.vue'
import { useRouter } from 'vue-router'

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: '项目1'
  }
]

// 达标考评情况
const upstandard = reactive({
  title: {
    text: '达标考评情况',
    textStyle: {
      color: '#fff',
      fontSize: 15
    },
    subtext: '达标率90%',
    subtextStyle: {
      color: '#fff'
    },
    left: 'center',
    top: '45%'
  },
  tooltip: {
    trigger: 'item'
  },
  color: ['#3ba272', '#ee6666'],
  series: [
    {
      name: '达标考评情况',
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 90, name: '达标'},
        {value: 10, name: '不达标'}
      ]
    }
  ]
})
// 绩效考评情况
const performanceAppraisal = reactive({
  title: {
    text: '绩效考评情况',
    textStyle: {
      color: '#fff',
      fontSize: 15,
    },
    left: 'center',
    bottom: '35%'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'liquidFill',
      radius: '60%',
      data: [0.6],
      itemStyle: {
        shadowBlur: 0
      },
      outline: {
        borderDistance: 0,
        itemStyle: {
          borderWidth: 5,
          borderColor: '#156ACF',
          shadowBlur: 20,
          shadowColor: 'rgba(255, 0, 0, 1)'
        }
      },
      label: {
        formatter: ({ data = 0 }) => {
          return `${data * 100}分`
        },
        show: true,
        color: '#294D99',
        insideColor: '#fff',
        fontSize: 24,
        fontWeight: 'bold',
        align: 'center',
        baseline: 'middle',
        position: 'inside'
      }
    }
  ]
})
// 扣分
const deductPoints = reactive({
  title: {
    text: '扣分情况',
    textStyle: {
      color: '#fff',
      fontSize: 15
    },
    left: 'center',
    top: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 5, name: '日常打分扣分'},
        {value: 6, name: '不良行为扣分'}
      ]
    }
  ]
})
// 问题
const problem = reactive({
  tooltip: {
    show: true
  },
  radar: {
    shape: 'circle',
    radius: '60%',
    indicator: [
      {name: '自动采集\n问题数量', show: false},
      {name: '工程  \n暂停令', show: false},
      {name: '安全质量\n问题数量', show: false}
    ],
    splitArea: {
      areaStyle: {
        color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 10
      }
    },
    axisName: {
      color: '#fff',
      lineHeight: 14,
      fontSize: 12
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [4, 3, 10],
          name: '问题',
          label: {
            show: false
          }
        }
      ]
    }
  ]
})
// 得分
const score = reactive({
  angleAxis: {
    show: false,
    max: 1000 * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
    type: 'value',
    startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
    splitLine: {
      show: false
    }
  },
  barMaxWidth: 20, //圆环宽度
  radiusAxis: {
    show: false,
    type: 'category'
  },
  polar: {
    center: ['50%', '50%'],
    radius: '120%'
  },
  series: [
    {
      type: 'bar',
      data: [{
        value: 750,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1, //从左到右 0-1
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#CD48AE'
            }, {
              offset: 1,
              color: '#2CABFC'
            }],
            globalCoord: false
          },
          shadowColor: 'rgba(255, 255, 255, 0.2)',
          shadowBlur: 10
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 2
    },
    {
      type: 'bar',
      data: [{
        value: 1000,
        itemStyle: {
          color: '#265195',
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    {
      type: 'gauge',
      startAngle: 210, //起始角度，同极坐标
      endAngle: -30, //终止角度，同极坐标
      max: 1000,
      splitNumber: 5, //分割线个数（除原点外）
      axisLine: { // 坐标轴线
        show: false
      },
      pointer: {
        show: false
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      title: {
        color: '#fff',
        shadowColor: '#fff',
        fontSize: 16,
        offsetCenter: ["0", '-25%'] //位置偏移
      },
      detail: { //仪表盘数值
        offsetCenter: ["0", '15%'],
        color: '#fff',
        fontSize: 20
      },
      data: [{value: 750, name: '评价'}]
    }
  ]
})

// 监理单位达标率
const upstandard2 = reactive({
  title: {
    text: '达标考评情况',
    textStyle: {
      color: '#fff',
      fontSize: 15
    },
    subtext: '达标率90%',
    subtextStyle: {
      color: '#fff'
    },
    left: 'center',
    top: '45%'
  },
  tooltip: {
    trigger: 'item'
  },
  color: ['#3ba272', '#ee6666'],
  series: [
    {
      name: '达标考评情况',
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 90, name: '达标'},
        {value: 10, name: '不达标'}
      ]
    }
  ]
})

// 监理单位绩效考评情况
const performanceAppraisal2 = reactive({
  title: {
    text: '绩效考评情况',
    textStyle: {
      color: '#fff',
      fontSize: 15,
    },
    left: 'center',
    bottom: '30%'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'liquidFill',
      radius: '60%',
      data: [0.6],
      itemStyle: {
        shadowBlur: 0
      },
      outline: {
        borderDistance: 0,
        itemStyle: {
          borderWidth: 5,
          borderColor: '#156ACF',
          shadowBlur: 20,
          shadowColor: 'rgba(255, 0, 0, 1)'
        }
      },
      label: {
        formatter: ({ data = 0 }) => {
          return `${data * 100}分`
        },
        show: true,
        color: '#294D99',
        insideColor: '#fff',
        fontSize: 24,
        fontWeight: 'bold',
        align: 'center',
        baseline: 'middle',
        position: 'inside'
      }
    }
  ]
})

// 监理单位扣分
const deductPoints2 = reactive({
  title: {
    text: '扣分情况',
    textStyle: {
      color: '#fff',
      fontSize: 15
    },
    left: 'center',
    top: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'],
      itemStyle: {
        borderRadius: 5,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 5, name: '日常打分扣分'},
        {value: 6, name: '不良行为扣分'}
      ]
    }
  ]
})

// 监理得分
const score2 = reactive({
  angleAxis: {
    show: false,
    max: 1000 * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
    type: 'value',
    startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
    splitLine: {
      show: false
    }
  },
  barMaxWidth: 20, //圆环宽度
  radiusAxis: {
    show: false,
    type: 'category'
  },
  polar: {
    center: ['50%', '50%'],
    radius: '120%'
  },
  series: [
    {
      type: 'bar',
      data: [{
        value: 750,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1, //从左到右 0-1
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#CD48AE'
            }, {
              offset: 1,
              color: '#2CABFC'
            }],
            globalCoord: false
          },
          shadowColor: 'rgba(255, 255, 255, 0.2)',
          shadowBlur: 10
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 2
    },
    {
      type: 'bar',
      data: [{
        value: 1000,
        itemStyle: {
          color: '#265195',
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 5,
          shadowOffsetY: 2
        }
      }],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1
    },
    {
      type: 'gauge',
      startAngle: 210, //起始角度，同极坐标
      endAngle: -30, //终止角度，同极坐标
      max: 1000,
      splitNumber: 5, //分割线个数（除原点外）
      axisLine: { // 坐标轴线
        show: false
      },
      pointer: {
        show: false
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      title: {
        color: '#fff',
        shadowColor: '#fff',
        fontSize: 16,
        offsetCenter: ["0", '-25%'] //位置偏移
      },
      detail: { //仪表盘数值
        offsetCenter: ["0", '15%'],
        color: '#fff',
        fontSize: 20
      },
      data: [{value: 750, name: '评价'}]
    }
  ]
})

const list = ref([
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  },
  {
    title: "劳务人员",
  }

])

const router = useRouter()
const toDetail = () => router.push('/workers')

</script>
<template>
  <div class="data-view">
    <div class="data-pro">
      <el-select v-model="value" placeholder="请选择项目">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </div>
    <div class="dv-part">
      <border-box1 class="dv-part-sub" v-for="i in 4" :key="i" :title="'施工单位整体评价' + i">
        <div class="data-content">
          <v-chart class="data-chart data-chart1" :option="upstandard" autoresize></v-chart>
          <v-chart class="data-chart data-chart2" :option="performanceAppraisal" autoresize></v-chart>
          <v-chart class="data-chart data-chart3" :option="deductPoints" autoresize></v-chart>
          <v-chart class="data-chart data-chart4" :option="problem" autoresize></v-chart>
          <v-chart class="data-chart data-chart5" :option="score" autoresize></v-chart>
        </div>
      </border-box1>

    </div>
    <div class="dv-part-r">
      <div class="dv-part-rl">
        <border-box2 class="dv-part-sub" v-for="i in 4" :key="i">
          <div class="data-content">
            <div class="dv-title">
              监理单位整体评价{{i}}
            </div>
            <v-chart class="data-chart0 data-chart6" :option="score2" autoresize></v-chart>
            <v-chart class="data-chart0 data-chart7" :option="performanceAppraisal2" autoresize></v-chart>
            <v-chart class="data-chart0 data-chart8" :option="upstandard2" autoresize></v-chart>
            <v-chart class="data-chart0 data-chart9" :option="deductPoints2" autoresize></v-chart>
          </div>
        </border-box2>
      </div>

      <border-box3 class="data-list">
        <div class="scorll-wrapper">
          <vue-seamless-scroll :data="list" class="scroll">
            <div class="scroll-item" v-for="(item,index) in list" :key="index" @click="toDetail">
              {{ item.title }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              考勤率：79%
              &nbsp;
              信用评价：80分
            </div>
          </vue-seamless-scroll>
        </div>
      </border-box3>
    </div>
  </div>
</template>


<style scoped>
.data-view {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  /*flex-direction: column;*/
}
.dv-part {
  width: 60%;
  padding: 50px 10px 0 10px;
  display: flex;
  flex-wrap: wrap;
}

.dv-part-sub {
  height: 50%;
  width: 50%;
}

.dv-part-r {
  width: 40%;
  padding: 10px;

}
.data-pro {
  position: absolute;
  top: 5px;
  left: 33px;
  z-index: 1;
}
.data-content {
  /*display: flex;*/
  height: 100%;
  width: 100%;
  position: relative;
  /*align-items: center;*/
}

.dv-part-rl {
  height: 70%;
  display: flex;
  flex-wrap: wrap;
}

.data-list {
  height: 30%;
}

.data-chart {
  width: 240px;
  height: 240px;
  position: absolute;
}

.data-chart1 {
  left: 0;
  top: 30px;
}

.data-chart2 {
  right: 10px;
  top: 30px;
}
.data-chart3 {
  left: 0;
  bottom: 0;
}
.data-chart4 {
  right: 10px;
  bottom: 0;
}

.data-chart5 {
  left: calc(50% - 120px);
  top: calc(50% - 120px);
}

.data-chart0 {
  width: 180px;
  height: 180px;
}

.data-chart6 {
  position: absolute;
  left: 0;
  top: 40px;
}

.data-chart7 {
  position: absolute;
  right: 10px;
  top: 20px;
}

.data-chart8 {
  position: absolute;
  left: 0;
  bottom: 0;
}

.data-chart9 {
  position: absolute;
  right: 10px;
  bottom: 0;
}

.scorll-wrapper {
  height: 100%;
  padding: 30px;
}
.scroll {
  height: 100%;
  overflow: hidden;
}
.dv-title {
  font-size: 18PX;
  left: 20px;
  top: 25px;
  position: absolute;
}
.scroll-item {
  display: flex;
  align-items: center;
  height: 24px;
  text-align: left;
}
</style>